<template>
	<view class="constellation_box bg-[length:100%_100%] pt-56 px-30 h-[766rpx]">
		<view class="flex justify-end mb-10">
			<ImageBoxVue class="" src="/static/test/constellation_title.png" width="236rpx" height="88rpx" />
		</view>
		<!--  -->
		<view class="flex justify-between items-center mb-30">
			<text class="title">我的星图配置</text>
			<view class="box-add p-12 px-20 rounded-full bg-[#FED000]" @click="onPath('/pages/views/archiveAdd')">
				<text class="text-[#6F4900] font-bold">添加我的星图</text>
			</view>
		</view>
		<!--  -->
		<!-- <view class="flex mt-30 rounded-lg overflow-hidden">
			<view class="flex-1" v-for="e,i in weekList" :key="i">
				<view class="bg-gradient-to-r from-[#FCE9D6] to-[#FDDEBD] text-center py-8">
					<text>{{e.label}}{{i+1}}</text>
				</view>
				<view class="bg-white text-center py-8">
					<text>{{e.val}}</text>
				</view>
			</view>
		</view> -->
		<!--  -->
		<view class="mt-20 flex items-center">
			<view class="w-140 h-140 rounded-full overflow-hidden border-2 border-solid border-[#BADEFF]">
				<ImageBoxVue src="/static/imgs/img1.png" width="140rpx" height="140rpx"></ImageBoxVue>
			</view>
			<view class="flex-1 ml-20">
				<view class="flex items-center" v-for="e,i in capacity" :key="i">
					<text>{{e.label}}</text>
					<view class="flex-1 mx-20 border-2 border-solid border-white rounded-full overflow-hidden bg-[#EEF1F6]">
						<view class="bg-gradient-to-r h-20 rounded-r-full"
							:style="{width:`${e.val}%`,'--tw-gradient-stops':`${e.colors[0]},${e.colors[1]}`}">
						</view>
					</view>
					<view class="w-40 text-center">
						<text :style="{color:e.colors[1]}" class="font-bold">{{e.val}}</text>
					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="">
			<view class="border-solid border-[transparent] ml-24 border-b-[#F0F2F7] w-30" style="border-width: 16rpx;">
			</view>
			<view class="bg-[#F0F2F7] p-10 rounded-md">
				<text class="font-bold">建议：</text>
				<text>{{jianyi}}</text>
			</view>
		</view>
		<!--  -->
		<!-- <view class="flex mt-30 justify-between">
			<view class="flex flex-col items-center" v-for="e,i in astrolabeList" :key="i" @click="onPath(e.router)">
				<ImageBoxVue :src="e.icon" width="96rpx" height="65rpx"></ImageBoxVue>
				<text class="mt-8">{{e.label}}</text>
			</view>
		</view> -->
		<OrientationVue :showTitle="false"></OrientationVue>
		<!--  -->
		<!-- <view>
			<view class="my-30">
				<text class="text-sm font-bold">推荐人工解读</text>
			</view>
			<scroll-view scroll-x>
				<view class="flex">
					<UserVue class="mr-30" v-for="e,i in userList" :key="i" :val="e"></UserVue>
				</view>
			</scroll-view>
		</view> -->
		<!--  -->
		<view id="qa" class="flex items-center mt-30">
			<ImageBoxVue src="/static/test/customer_service.png" width="68rpx" height="62rpx"></ImageBoxVue>
			<view class="bg-[#EDF5FA] rounded-full flex-1 mx-10 h-68">
				<input type="text" v-model="describe" placeholder="请输入您要咨询的问题" class="h-full pl-20" />
			</view>
			<view class="button_box h-84 mb-[-20rpx] w-170 text-center pt-15 bg-cover" @click="handleOpen">
				<text class="text-sm text-white">人工解读</text>
			</view>
		</view>
		<!-- 解答弹窗 -->
		<uni-popup ref="aiProblemRef">
			<view class="p-30 bg-white border-[#FFCE99] border-solid rounded-lg w-[690rpx]">
				<view class="bg-[#EBF5FB] p-20">
					<text>{{problem}}</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onShow
	} from "@dcloudio/uni-app"
	import liveApi from '@/apis/apiList/liveApi'
	import UserVue from '@/components/User.vue'
	import testApi from '@/apis/apiList/testApi'
	import OrientationVue from '../../../user/components/Orientation.vue'
	const weekList = new Array(7).fill({
		label: "周",
		val: "爱情怪"
	})
	const capacity = ref([{
		label: "爱情",
		key: "love",
		colors: ["#FFA4A4", "#FF6161"],
		val: 0
	}, {
		label: "财富",
		key: "wealth",
		colors: ["#FFD5A4", "#FF9D29"],
		val: 0
	}, {
		label: "事业",
		key: "career",
		colors: ["#A8E5FF", "#4B9EFF"],
		val: 0
	}, {
		label: "学习",
		key: "study",
		colors: ["#AAE7A9", "#5DCA5B"],
		val: 0
	}])
	const jianyi = "今日可以全情投入到工作学习当中，注意家人关系，尤其是表达方面容易被人误会"
	const astrolabeList = [{
		icon: "/static/test/astrolabe1.png",
		label: "星盘",
		router: "/pages/test/astrolabe"
	}, {
		icon: "/static/test/astrolabe2.png",
		label: "关系合盘",
		router: ""
	}, {
		icon: "/static/test/astrolabe3.png",
		label: "星盘",
		router: ""
	}, {
		icon: "/static/test/astrolabe4.png",
		label: "星盘",
		router: ""
	}, {
		icon: "/static/test/astrolabe5.png",
		label: "星盘",
		router: ""
	}]
	const userList = ref([])
	const describe = ref('')

	const handleOpen = () => {
		// popupRef.value.open()
		uni.navigateTo({
			url: `/pages/test/artificial?describe=${describe.value}`
		})
	}
	// 人工解读
	const getisrecAnchorlist = () => {
		liveApi.getisrecAnchorlist().then(res => {
			userList.value = res.data
		})
	}
	// 幸运值
	const memberGetDayluck = () => {
		const opt = {
			"member.id": uni.getStorageSync('user').id,
		}
		if (uni.getStorageSync('user').id) {
			testApi.memberGetDayluck(opt).then(res => {
				capacity.value = capacity.value.map(a => {
					return {
						...a,
						val: res.data[a.key]
					}
				})
			})
		}
	}

	const onPath = (router) => {
		uni.navigateTo({
			url: router
		})
	}
	onShow(() => {
		describe.value = ''
		getisrecAnchorlist()
		memberGetDayluck()
	})
</script>

<style lang="less">
	.constellation_box {
		background-image: url("/static/test/constellation_bg.png");

		.title {
			font-weight: 500;
			font-size: 36rpx;
			color: #333333;
		}

		.box-add {
			font-weight: bold;
			font-size: 28rpx;
			color: #6F4900;
			line-height: 28rpx;
			letter-spacing: 4px;
		}

		.button_box {
			background-image: url("/static/test/button.png");
		}
	}
</style>